<template>
  <div class="Hcenter flex1">
    <div class="flexC">
      <div class="flex" style="padding:1rem 0rem; margin-top: -3.5rem;">
        <div class="flexC  textC">
          <div class="flex  cursor font_s40" style="color: #FFDC75; ">
            <p class="flex1 textR">
              207
              <span>人</span>
            </p>
            <p class="flex1 textC">
              692
              <span>人</span>
            </p>
            <p class="flex1 textL" style="padding-left: 1rem;">
              487
              <span>人</span>
            </p>
            <p class="flex1 textL">
              1,349
              <span>万元</span>
            </p>
          </div>
          <img src="../../assets/img/home/006.png" alt="" style="width: 48.1875rem;height:4.3125rem ;" />
          <div class="flex  cursor font_s18" style="color: #F5B45F; ">
            <p class="flex1 textR" @click="clone.chart1 = true">当日申请人数</p>
            <p class="flex1 textC">当日评估人数</p>
            <p class="flex1 textL" style="padding-left: 1rem;">当日服务数</p>
            <p class="flex1 textL">当月结算费用</p>
          </div>
        </div>
      </div>
      <div class="map flexC JustifyContentSB cursor">
        <div class=" flex JustifyContentSB font_s18">
          <div class="flexC textC">
            <p class="colorF font_s18" style="margin: 1rem; width:5.625rem;height:2.25rem;background:rgba(45,125,241,1);border-radius:1.5rem; line-height:2.5rem;">散点图</p>
            <p style="margin: 1rem; width:5.625rem;height:2.25rem;border:0.125rem solid rgba(45,125,241,1);border-radius:1.5rem; color: #2D7DF1; line-height:2.5rem;">热力图</p>
          </div>
          <ul class="flex">
            <li class="icon icon_a"></li>
            <li class="icon icon_b"></li>
            <li class="icon icon_c"></li>
            <li class="icon icon_d"></li>
            <li class="icon icon_e"></li>
          </ul>
        </div>
        <div class="flex AlignItemsC">
          <div class="font_s16 Bold   cursor" style="color: #E9FEFD;" :class="{ category_temp: arrowImgState }">
            <ul class="flexC JustifyContentSA category" v-if="!arrowImgState">
              <li @click="switchmap2(1)">
                <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 1 ? '/img/click01.png' : '/img/click01.png'" alt />
                住养服务机构（121）
              </li>
              <li @click="switchmap2(2)">
                <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 2 ? '/img/14.png' : '/img/15.png'" alt />
                居家服务机构（35）
              </li>
              <li @click="switchmap2(3)">
                <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 3 ? '/img/14.png' : '/img/15.png'" alt />
                护理站（31）
              </li>
              <li @click="switchmap2(4)">
                <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 4 ? '/img/14.png' : '/img/15.png'" alt />
                日间照料中心（12）
              </li>
              <li @click="switchmap2(5)">
                <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 5 ? '/img/14.png' : '/img/15.png'" alt />
                其他（9）
              </li>
            </ul>
            <p>
              <img v-if="!arrowImgState" src="../../assets/img/arrowImg.png" class="arrowImg" @click="arrowImgState = true" />
              <img v-if="arrowImgState" src="../../assets/img/arrowImg_two.png" class="arrowImg" @click="arrowImgState = false" />
            </p>
          </div>

        </div>
      </div>
    </div>
    <Modal v-if="clone.chart1" @hidden="hiddenEcharts(0)"><div id="echartsA"></div></Modal>
  </div>
</template>

<script>
import { mapFun } from '@/components/gdmap';
import { lowRisk, middRisk, jsmc, zhuyang, qitadata, rituodata, hulidata, jujiadata, zhuyangdata } from '@/listData.js';
import Modal from '@/components/Modal';
export default {
  name: 'Hcenter',
  components: {
    Modal
  },
  data() {
    return {
      clone: {
        chart1: false,
        chart2: false,
        chart3: false,
        chart4: false
      },
      arrowImgState: false,
      category: 1
    };
  },
  mounted() {
    // this.echarts()
  },
  methods: {
    switchmap2(index) {
      this.category = index;
      if (index === 1) {
        // console.log('zhuyang', zhuyang)
        mapFun(this.$root.MapGd, zhuyangdata);
        // mapFun(this.$root.MapGd, lowRisk)
      } else if (index === 2) {
        mapFun(this.$root.MapGd, jujiadata);
      } else if (index === 3) {
        mapFun(this.$root.MapGd, hulidata);
      } else if (index === 4) {
        mapFun(this.$root.MapGd, rituodata);
      } else if (index === 5) {
        mapFun(this.$root.MapGd, qitadata);
      }
    }

    /* hiddenEcharts (index) {
      this.isActive = index
      if (index === 0) {
        this.clone.chart1 = false
      } else if (index === 1) {
        this.clone.chart2 = false
      } else if (index === 2) {
        this.clone.chart3 = false
      } else if (index === 3) {
        this.clone.chart4 = false
      }
    },
    echarts () {
      var myChart = this.$echarts.init(document.getElementById('echartsA'))
      var myChart2 = this.$echarts.init(document.getElementById('echartsB'))
      var myChart3 = this.$echarts.init(document.getElementById('echartsC'))
      var myChart4 = this.$echarts.init(document.getElementById('echartsC'))
      var colors = ['#00ff00', '#0A5EBD', '#74ADFF']

      option = {
        color: colors,
        title: { text: '居家和住养机构结算趋势图' },
        grid: {
          left: '2%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['总费用', '基金支付费用', '结算人次']
        },
        xAxis: [
          {
            type: 'category',
            data: ['2018,1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '2019年1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(万元)',
            min: 0,
            max: 250,
            interval: 50,
            axisLine: {
              lineStyle: {
                color: colors[0]
              },
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '人次',
            min: 0,
            max: 25,
            interval: 5,
            axisLine: {
              lineStyle: {
                color: colors[1]
              },
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '总费用',
            type: 'bar',
            barWidth: 10,
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2]
          },
          {
            name: '基金支付费用',
            type: 'bar',
            barWidth: 10,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2]
          },
          {
            name: '结算人次',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4]
          }
        ]
      }
      myChart.setOption(option)

      option2 = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '30',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
      myChart2.setOption(option2)

      option3 = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '15%',
          right: '4%',
          bottom: '40%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '大团镇社区事务受理服务中心',
              '新场镇社区事务受理服务中心  ',
              '祝桥镇东海社区事务受理服务中心',
              '祝桥镇盐仓社区事务受理服务中心 ',
              '祝桥镇社区事务受理服务中心',
              '康桥镇社区事务受理服务中心',
              '航头镇社区事务受理服务中心',
              '川沙新镇社区事务受理服务中心  ',
              '高行镇社区事务受理服务中心',
              '万祥镇社区事务受理服务中心',
              '唐镇社区事务受理服务中心',
              '高东镇社区事务受理服务中心',
              '三林镇社区事务受理服务中心',
              '芦潮港镇社区事务受理服务中心',
              '周家渡街道社区事务受理服务中心',
              '浦兴街道社区事务受理服务中心',
              '祝桥镇施湾社区事务受理服务中心',
              '洋泾街道社区事务受理服务中心',
              '南码头路街道社区事务受理服务中心',
              '书院镇社区事务受理服务中心',
              '祝桥镇社区事务受理服务中心江镇分中心',
              '航头镇社区事务受理服务中心鹤沙航城分中心'
            ],
            axisLabel: {
              alignWithLabel: true,
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '20',
            data: [10, 23, 44, 56, 60, 45, 45, 10, 23, 44, 56, 60, 45, 45, 10, 23, 44, 56, 60, 45, 45, 45]
          }
        ]
      }
      myChart3.setOption(option3)

      option4 = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['201910', '201911', '201912', '202001', '202002', '202003', '202004', '202005'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '30',
            data: [0, 0, 3825, 530, 547, 821, 1139, 945]
          }
        ]
      }
      myChart4.setOption(option4)
    }*/
  }
};
</script>

<style lang="scss">
.Hcenter {
  .echartsA {
    width: 62.5rem;
    height: 12.5rem;
    background: #0e529e;
  }

  .map {
    width: 47.625rem;
    height: 34.25rem;
    background: rgba(0, 40, 97, 0.4);

    .icon {
      width: 2.9375rem;
      height: 3rem;
      margin: 1rem;
    }
    .icon_a {
      background: url(../../assets/icon01.png);
      background-size: 100% 100%;
    }
    .icon_b {
      background: url(../../assets/icon01.png);
      background-size: 100% 100%;
    }
    .icon_c {
      background: url(../../assets/icon02.png);
      background-size: 100% 100%;
    }
    .icon_d {
      background: url(../../assets/icon03.png);
      background-size: 100% 100%;
    }
    .icon_e {
      background: url(../../assets/icon04.png);
      background-size: 100% 100%;
    }
  }

  .category {
    width: 14rem;
    height: 17.75rem;
    background: rgba(4, 13, 39, 1);
    opacity: 0.7;
    border-radius: 0px 16px 16px 0px;
  }

  .category_temp {
    width: 1rem !important;
    .arrowImg {
      left: 29.6% !important;
    }
  }
  .arrowImg {
    width: 1.2rem;
    height: 5rem;
   position: absolute;
    left: 41.4%;
    bottom: 34.5%;
  }

  .map_qiehuan {
    width: 14rem;
    height: 17.75rem;
    background: rgba(4, 13, 39, 0.7);
    border-radius: 0rem 1rem 1rem 0rem;
    padding-left: 1.5rem;
  }
  .map_qiehuan li {
    color: #a2adbf;
    span {
      width: 1.25rem;
      height: 1.25rem;
      border: 1px solid;
      border-radius: 50%;
      margin-right: 1rem;
    }
  }
  .map_qiehuan li:hover {
    color: #00ffff;
  }
}
</style>
